<template>
   <div class="echarts" :id="id"></div>
</template>

<script >
import EchartsThemeController from "./EchartsThemeController";
import Theme from "../ThemeSetting/Theme";

const {
  defaultStyleData
} = Theme.getTheme();

const {echarts, objectList} = EchartsThemeController;
export default {
	name: "Echarts",
  props: {
    id: {
      type: String,
      default: `echart-${  Math.random().toFixed(4) * 10000}`,
    },
    option: {
      type: Object,
      default: () => ({})
    }	
	},
  data() {
    return {
      myChart: null,
			styleId: defaultStyleData.id
    };
  },
	methods:{
	  init(){
		  // 基于准备好的dom，初始化echarts实例
		  const myChart = echarts.init(document.getElementById(this.id), this.styleId);

		  // 指定图表的配置项和数据
		  const {option, id} = this;

		  // 使用刚指定的配置项和数据显示图表。
		  myChart.setOption(option);
			this.myChart = myChart;
			objectList.push({
				object: myChart,
				id,
				option,
				onChange: newChart=> {
					this.myChart = newChart;
					console.log(this.myChart);
				}
			});
			console.log(myChart);
		}
  },
  mounted() {
  	this.init();
  },
	beforeDestroy(){
		const index = objectList.findIndex(item => item.id === this.id);
		this.myChart.dispose();
		objectList.splice(index, 1);
		
	}
};

</script>

<style lang="less" scoped>
	.echarts {
		width: 100%;
		height: 100%;
	}
</style>



